<template>
  <div class="">
    <div class="myInfo">
      <div class="own">个人资料</div>
      <div class="main">
        <template v-for="(item, index) in attrs">
          <div class="list row" :key="item.name + index">
            <i class="title">{{ item.name }}:</i>
            <div class="values">
              <i v-if="item.type == 'input'"><input
                  :ref="'menuItem'+index"
                  :disabled="!item.change"
                  :class="{'value':true,'inputs':item.change}"
                  v-model="userInfo[item.attr]"
                  @blur="change(index)"
                ></input><i class="change" @click="toChange(index)">修改</i>
              </i>
              <el-radio-group
                v-else-if="item.type == 'radio'"
                v-model="userInfo[item.attr]"
              >
                <el-radio :label="1">男</el-radio>
                <el-radio :label="2">女</el-radio>
              </el-radio-group>
              <div class="imgB" v-else-if="item.type == 'file'">
                <el-upload
              class="avatar-uploader"
              :action="`${url}`+'/index/sys/user/changePpictureAddr/' + `${userInfo.userId}`"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <div class="" v-if="userInfo[item.attr]">
                <img
                  class="img avatar"
                  :src="`${url}` + `${userInfo[item.attr]}`"
                />
              </div>
              <i v-else class="el-icon-plus avatar-uploader-icon">上传图片</i>
            </el-upload>
              </div>
            </div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      url: localStorage.getItem("url"),
      imageUrl: "",
      fileList: [],
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
      userInfo: {},
      attrs: [
        { name: "姓名", type: "input", attr: "name", code: "", change: false },
        {
          name: "昵称",
          type: "input",
          attr: "username",
          code: "",
          change: false,
        },
        {
          name: "头像",
          type: "file",
          attr: "ppictureAddr",
          code: "",
          change: false,
        },
        { name: "性别", type: "radio", attr: "sex", code: "", change: false },
        { name: "年龄", type: "input", attr: "phone", code: "", change: false },
        { name: "邮箱", type: "input", attr: "email", code: "", change: false },
        {
          name: "地址",
          type: "input",
          attr: "address",
          code: "",
          change: false,
        },
        { name: "QQ", type: "input", attr: "qq", code: "", change: false },
        { name: "手机", type: "input", attr: "phone", code: "", change: false },
        {
          name: "自我介绍",
          type: "input",
          attr: "desctiption",
          code: "",
          change: false,
        },
      ],
    };
  },
  created() {
    this.$axios
      .get("sys/user/getUserByUserId/" + this.$store.state.user.user.userId)
      .then(({ data }) => {
        if (data) {
          console.log("data", data);
          this.userInfo = data.userInfo;
        }
      });
  },
  methods: {
    handleRemove(file) {
      console.log(file);
    },
    handlePictureCardPreview(file) {
      console.log(file);
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },

    handleAvatarSuccess(res, file) {
      this.userInfo.ppictureAddr = res.ppictureAddr;
    },
    beforeAvatarUpload(file) {
      console.log("beforeAvatarUpload");
      const isJPG =
        file.type === "image/jpeg" ||
        file.type == "image/png" ||
        file.type == "image/gif";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 jpeg、png、gif 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    toChange(index) {
      this.attrs[index].change = true;
      // 动态绑定
      // :ref="'menuItem'+index"
      // 动态获取
      // this.$refs[`menuItem${index}`][0]

      this.$nextTick(() => {
        this.$refs[`menuItem${index}`][0].focus();
      });
      // console.log(this.$refs[`menuItem${index}`]);
      // console.log(this.$refs[`menuItem${index}`][0]);
    },
    change(index) {
      this.attrs[index].change = false;
      this.$axios
        .post("sys/user/updataByUserInfo", this.userInfo)
        .then(({ data }) => {
          if (data.code == 201) {
            this.$message.success("修改成功");
          }
          this.userInfo = data.userInfo;
        });
    },
  },
};
</script>

<style lang="less" scoped>
.myInfo {
  .own {
    font-size: 24px;
    font-family: "font6";
    margin-bottom: 20px;
    margin-top: 10px;
  }
  .main {
    padding-top: 20px;
    padding-left: 30px;
    border: 1px solid lightsteelblue;
  }
  .list {
    margin-bottom: 20px;
    .title {
      margin-right: 20px;
    }
    // .values {
    // }
  }
}
.value {
  outline: none;
  display: inline;
  margin-left: 10px;
  margin-right: 10px;
  border: none;
  width: 100px;
  overflow: hidden;
}
.inputs {
  border: 1px solid lightsteelblue;
}
.change {
  font-size: 10px;
  color: rgb(148, 175, 222);
}
.change:hover {
  cursor: pointer;
  color: rgb(236, 60, 60);
}
</style>
<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>